import Taro from "@tarojs/taro";
import { useState } from "react";
import { useDispatch } from 'react-redux'
import {Button, Image, Input, Text, View} from "@tarojs/components";
import { setShow } from '../../../features/counter/counterSlice'

export default function Btns() {
  const dispatch = useDispatch()
  const [tabImgs] = useState([
    {
      url: require('../../../images/zhaopian.png'),
      click: () => {

      }
    },
    {
      url: require('../../../images/xiangji.png')
    },
    {
      url: require('../../../images/xiangji.png')
    }
  ]);
  function closeDuiHuaKuang () {
    dispatch(setShow({
      show: false
    }))
  }
  const [btn] = useState([
    {
      text: '签退',
      size: 'mini',
      type: 'primary',
      color: '#2dd7ad'
    },
    {
      text: '个人作业',
      size: 'mini',
      type: 'primary',
      color: '#ec5a54',
      click: () => {
        dispatch(setShow({
          title: '个人作业',
          show: true,
          heiddenClose: true,
          Nrs: function () {
            return (
              <View className='grzybox'>
                <View className='imagebox'>
                  {
                    tabImgs.map((item, index) => <View onClick={item.click} className='itm' key={index}>
                      <Image className='images' src={item.url}></Image>
                    </View>)
                  }
                </View>
                <Input className='inputs' type='text' placeholder='请输入内容' />
              </View>
            )
          },
          Footers: function () {
            return (
              <View className='grsx-footer'>
                 <View className='btn fzsr'>复制上日</View>
                 <View className='btn qx' onClick={closeDuiHuaKuang}>取消</View>
                 <View className='btn qd'>确定</View>
              </View>
            )
          }
        }))
      }
    },
    {
      text: '历史',
      size: 'mini',
      type: 'primary',
      color: '#2dd7ad',
      click: () => {
        Taro.navigateTo({
          url: '/pages/classManage/lishi/index?id=1',
          events: {
            // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
            acceptDataFromOpenedPage: function (data) {
              console.log(data)
            },
            someEvent: function (data) {
              console.log(data)
            }
          },
          success: function (res) {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit('acceptDataFromOpenerPage', {data: 'test'})
          }
        }).then(() => {})
      }
    },
    {
      text: '点评',
      size: 'mini',
      type: 'primary',
      color: '#71aaf7',
      click: () => {
        dispatch(setShow({
          title: '点评',
          show: true,
          TitleCom: function () {
            return (
              <View style={{fontSize: '20px', fontWeight: 'bold', textAlign: 'center', margin: '20px 0'}}>
                点评【<Text style={{color: '#26d29d'}}>林大大</Text>】
              </View>
            )
          },
          Nrs: function () {
            return (
              <View className='grzybox'>
                <Input className='inputs' type='text' placeholder='请输入内容' />
              </View>
            )
          },
          Footers: function () {
            const btns = [
              {
                text: '暂存',
                size: 'mini',
                type: 'primary'
              },
              {
                text: '保存通知',
                size: 'mini',
                type: 'primary'
              },
              {
                text: '重置',
                size: 'mini',
                type: 'primary'
              },
              {
                text: 'AI生成',
                size: 'mini',
                type: 'default'
              }
            ]
            return (<View className='Buttonbox'>
              {btns.map((item, index) => {
                return (
                  <Button
                    style={{margin: 0, padding: '0 10px'}}
                    key={index}
                    size={item.size ? item.size : ''}
                    type={item.type ? item.type : ''}
                    loading={item.loading ? item.loading : false}
                    disabled={item.disabled ? item.disabled : false}
                  >
                    {item.text}
                  </Button>
                )
              })}
            </View>)
          }
        }))
      }
    },
    {
      text: '成长数',
      size: 'mini',
      type: 'primary',
      color: '#2dd7ad',
      click: () => {
        Taro.navigateTo({
          url: '/pages/classManage/czs/index?id=1',
          events: {
            // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
            acceptDataFromOpenedPage: function (data) {
              console.log(data)
            },
            someEvent: function (data) {
              console.log(data)
            }
          },
          success: function (res) {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit('acceptDataFromOpenerPage', {data: 'test'})
          }
        }).then(() => {})
      }
    },
    {
      text: '作业本',
      size: 'mini',
      type: 'primary',
      color: '#ec716f',
      click: () => {
        Taro.navigateTo({
          url: '/pages/classManage/zhuoyeben/index?id=1',
          events: {
            // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
            acceptDataFromOpenedPage: function (data) {
              console.log(data)
            },
            someEvent: function (data) {
              console.log(data)
            }
          },
          success: function (res) {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit('acceptDataFromOpenerPage', {data: 'test'})
          }
        }).then(() => {})
      }
    },
    {
      text: '学情',
      size: 'mini',
      type: 'primary',
      color: '#2dd7ad',
      click: () => {
        Taro.navigateTo({
          url: '/pages/classManage/xq/index?id=1',
          events: {
            // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
            acceptDataFromOpenedPage: function (data) {
              console.log(data)
            },
            someEvent: function (data) {
              console.log(data)
            }
          },
          success: function (res) {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit('acceptDataFromOpenerPage', {data: 'test'})
          }
        }).then(() => {})
      }
    },
    {
      text: '归类',
      size: 'mini',
      type: 'primary',
      color: '#73acf8',
      click: () => {
        Taro.navigateTo({
          url: '/pages/classManage/gl/index?id=1',
          events: {
            // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
            acceptDataFromOpenedPage: function (data) {
              console.log(data)
            },
            someEvent: function (data) {
              console.log(data)
            }
          },
          success: function (res) {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit('acceptDataFromOpenerPage', {data: 'test'})
          }
        }).then(() => {})
      }
    }
  ])
  return (
    <View className='Btns'>
      {
        btn.map((item, index) => {
          return (
            <View
              key={index}
              className='btn'
              style={{background: item.color}}
              onClick={item.click}
            >{item.text}</View>
          )
        })
      }
    </View>
  )
}
